<template>
  <div class="container">
    <a-form layout="inline">
      <a-form-item label="zoom">
        <a-input-number v-model="zoom" />
      </a-form-item>
      <a-form-item label="center">
        <a-input read-only :value="center.join(',')" style="width: 180px;" />
      </a-form-item>
      <a-form-item label="pitch">
        <a-input-number v-model="pitch" :step="5" />
      </a-form-item>
      <a-form-item label="rotation">
        <a-input-number v-model="rotation" :step="5" />
      </a-form-item>
    </a-form>
    <div style="width: 100%; height: 100vh;">
      <amap
        cache-key="map"
        ref="map"
        view-mode="3D"
        map-style="amap://styles/whitesmoke"
        async
        :zoom.sync="zoom"
        :center.sync="center"
        :pitch.sync="pitch"
        :rotation.sync="rotation"
        :show-indoor-map="false"
        is-hotspot
        @hotspotclick="onHotspotClick"
      >
        <div v-for="item in positions" :key="item.id">
          <amap-marker
            :position="item.location"
            :label="{
            content: item.title,
            direction: 'top',
          }"
            :icon="item.url"
          />
        </div>
      </amap>
      <amap-info-window :position="position" :vislble="visible" is-custom>
        <div>content of this info window</div>
      </amap-info-window>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      center: [112.444656, 37.967027],
      position: [],
      positions: [
        {
          id: 1,
          title: '崛围山',
          location: [112.444656, 37.967027],
          url: require('@/assets/static/中华傅山园.png')
        },
        {
          id: 2,
          title: '中华傅山园',
          location: [112.462104, 38.007899],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 3,
          title: '窦大夫祠',
          location: [112.439811, 38.011186],
          url: require('@/assets/static/窦大夫祠.png')
        },
        {
          id: 4,
          title: '净因寺',
          location: [112.440412, 37.997464],
          url: require('@/assets/static/净因寺.png')
        },
        {
          id: 5,
          title: '崛围山-多福寺',
          location: [112.435322, 37.967043],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 6,
          title: '北龙泉寺',
          location: [112.455471, 37.926389],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 7,
          title: '西禅寺',
          location: [112.455127, 37.92666],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 8,
          title: '天龙山石窟',
          location: [112.385665, 37.737968],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 9,
          title: '明秀寺',
          location: [112.441466, 37.681813],
          url: require('@/assets/static/明秀寺.png')
        },
        {
          id: 10,
          title: '龙山石窟',
          location: [112.443576, 37.732299],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 11,
          title: '太山龙泉寺',
          location: [112.442485, 37.751135],
          url: require('@/assets/static/图钉.png')
        },

        {
          id: 12,
          title: '天龙山景区',
          location: [112.4006, 37.723604],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 13,
          title: '龙王庙',
          location: [112.411527, 37.662104],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 14,
          title: '真武庙',
          location: [112.572148, 37.739971],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 15,
          title: '晋祠',
          location: [112.446979, 37.707458],
          url: require('@/assets/static/图钉.png')
        },
        {
          id: 16,
          title: '蒙山大佛',
          location: [112.447061, 37.780667],
          url: require('@/assets/static/蒙山大佛.png')
        },
        {
          id: 17,
          title: '王郭关帝庙',
          location: [112.439385, 37.680452],
          url: require('@/assets/static/图钉.png')
        }

      ],
      zoom: 14,
      pitch: 45,
      rotation: 15
    }
  },
  methods: {
    onHotspotClick (e) {
      if (e && e.lnglat) {
        this.center = [e.lnglat.lng, e.lnglat.lat]
      }
    }
  }
}
</script>

<style scoped>
</style>
